<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="/static/css/chart.css"/>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
    <style>
        .distance{
            margin-top: 10px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div class="wrap-container welcome-container">
    <div class="map_search" style="margin-right: 10px;margin-left: 5px">
        <form class="navbar-form navbar-left" method="POST">
            {% csrf_token %}
            <div class="layui-inline">
                <input id="search" type="text" name="search" class="layui-input distance" placeholder="查询日期" value="{{time}}"/>
            </div>
            <button id="select" type="submit" class="layui-btn distance">查询</button>
        </form>
        <button id="delete" type="submit" class="layui-btn" style="position: absolute;right: 10px;top: 15px">清除历史数据</button>
    </div>
    <div class="panel-body hmap_h" id="CPU" ></div>
    <div class="panel-body hmap_h" id="Memory" ></div>
    <div class="panel-body hmap_h" id="Network" ></div>
    <div class="panel-body hmap_h" id="Disk_detail1" ></div>
    <div class="panel-body hmap_h" id="Disk_detail2" ></div>
    <div class="panel-body hmap_h" id="Disk_detail3" ></div>
</div>
<script src="/static/js/highcharts.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/jquery.cookie.js" ></script>
<script type="text/javascript">
    Highcharts.setOptions({ global: { useUTC: false } });
</script>
<script>
    var chart = Highcharts.chart('CPU', {
        chart: {
            type: 'spline',
        },
        title: {
            text: 'CPU使用率'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 1) + '%';
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 50,
        },
        yAxis: {
            title: {
                text: 'CPU使用率单位：%'
            },
            minPadding: 0.2,
            maxPadding: 0.2,
            min:0,
            max:100,
        },
        legend: {
            enabled: true
        },
        series:{{date|safe}}
    });
</script>
<script>
    var chart = Highcharts.chart('Memory', {
        chart: {
            type: 'spline',
        },
        title: {
            text: '内存使用率'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 1) + '%';
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 50,
        },
        yAxis: {
            title: {
                text: '内存使用率：%'
            },
            minPadding: 0.2,
            maxPadding: 0.2,
            min:0,
            max:20,
        },
        legend: {
            enabled: true
        },
        series:{{memory|safe}}
    });
</script>
<script>
    var chart = Highcharts.chart('Network', {
        chart: {
            type: 'spline',
        },
        title: {
            text: '网络读写字节'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 1) + ' MB';
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 50,
        },
        yAxis: {
            title: {
                text: '字节单位：MB'
            },
            minPadding: 0.2,
            maxPadding: 0.2,
            min:0,
            // max:100,
        },
        legend: {
            enabled: true
        },
        series:{{network|safe}}
    });
</script>
<script>
    var chart = Highcharts.chart('Disk_detail1', {
        chart: {
            type: 'spline',
        },
        title: {
            text: '磁盘读写次数'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 3) + ' 万次';
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 50,
        },
        yAxis: {
            title: {
                text: '次数单位：万次'
            },
            minPadding: 0.2,
            maxPadding: 0.2,
            min:0,
            // max:100,
        },
        legend: {
            enabled: true
        },
        series:{{disk1|safe}}
    });
</script>
<script>
    var chart = Highcharts.chart('Disk_detail2', {
        chart: {
            type: 'spline',
        },
        title: {
            text: '磁盘读写字节'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 3) + ' GB';
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 50,
        },
        yAxis: {
            title: {
                text: '字节单位：GB'
            },
            minPadding: 0.2,
            maxPadding: 0.2,
            min:0,
            // max:100,
        },
        legend: {
            enabled: true
        },
        series:{{disk2|safe}}
    });
</script>
<script>
    var chart = Highcharts.chart('Disk_detail3', {
        chart: {
            type: 'spline',
        },
        title: {
            text: '磁盘读写时间'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 3) + ' 秒';
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 50,
        },
        yAxis: {
            title: {
                text: '时间单位：秒/S'
            },
            minPadding: 0.2,
            maxPadding: 0.2,
            min:0,
            // max:100,
        },
        legend: {
            enabled: true
        },
        series:{{disk3|safe}}
    });
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        laydate.render({
            elem: '#search'
            ,type: 'datetime'
        });
    });
</script>
<script>
    $('#delete').click(function () {
        $.ajax({
            url:'/register.html',
            type:'POST',
            data: {'key': 'delete'},
            headers:{'X-CSRFtoken':$.cookie('csrftoken')},
            success:function (base1) {
                if (base1 == 'true'){
                    window.location.href = '/history.html'
                    $('#delete').attr("disabled",true)
                }
            }
        })
    })
</script>
<script>
    $('#delete').click(function () {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.load();
        })
    })
    document.onkeydown = function(){
        if(window.event.keyCode == 13){
            $('#select').click()
        }
    }
</script>
</body>
</html>
